<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
    	<span class="title">检索管理</span>
    	<div class="body">
    		<span>年级：</span>
    		<select class="select" v-model="gradeSelect" @change="getClassData()" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
    			<option v-for="(item, key) in gradeOption" :label="item" :value="key"></option>
    		</select>
    		<span>班级：</span>
    		<select class="select" v-model="classSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
    			<option v-for="(item, key) in classOption" :label="item" :value="item"></option>
    		</select>
    		<div class="middle">
          <el-autocomplete
            class="inline-input"
            v-model="state2"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            placeholder="请输入学生姓名"
            size="small">
            </el-autocomplete>
    		  <el-button type="primary" @click="getStudentNameData()" size="small">搜索</el-button>
      		<div class="right">
            <el-button style="margin-right: 40px;" type="primary" @click="clearGradeSelect()" size="small">重置</el-button>
      			<a :href="this._httpUrl + `studentInfo/listQuery/export?yxt-xtoken=${exportUrl}`">
              <el-button type="primary" size="small">导出</el-button>
            </a>
      		</div>
        </div>
    	</div>
    </div>

    <div class="model query">
      <img :src="IMGBASE64.XUESHENGRENSHU2X" class="pink">
    	<span class="title">学生名单查询</span>
    	<div class="kong"></div>
    	<template>
    		<el-table :data="formData" style="width: 100%">
    			<el-table-column prop="numValue" label="#" align="center"></el-table-column>
    			<el-table-column prop="grade" label="年级名称" align="center"></el-table-column>
    			<el-table-column prop="clazz" label="班号" align="center"></el-table-column>
    			<el-table-column prop="studentId" label="学号" align="center"></el-table-column>
    			<el-table-column prop="name" label="姓名" align="center"></el-table-column>
    			<el-table-column prop="sex" label="性别" align="center"></el-table-column>
    		</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
    	</template>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      exportUrl: null,
      selectValue: null,
      selectLabel: null,
      options: [],
      formData: [],
      gradeSelect: null,
      gradeOption: {},
      classSelect: null,
      classOption: [],
      key: null,
      total: 0,
      page: 1,
      paging: true,
      allNameData: [],
      restaurants: [],
      state2: null
    }
  },
  mounted () {
    this.getGradeData()
    this.getStudentNameData()
    this.exportUrl = this._exportUrl()
  },
  methods: {
    _exportUrl () {
      let _cookie = document.cookie.split(';')
      let _cookieArray = []
      _cookie.forEach(v => {
        let _d = v.split('=')
        _cookieArray.push({
          key: _d[0],
          value: _d[1]
        })
      })
      console.log(_cookieArray[0].value)
      return _cookieArray[0].value
    },
    handleCurrentChange (val) {
      this.page = val
      this.getStudentNameData()
    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.indexOf(queryString.toLowerCase()) === 0)
      }
    },
    getStudentNameData () {
      this.$http.post(this._httpUrl + 'studentInfo/listQuery', {page: (this.page), rows: 20, name: this.state2, grade: this.gradeSelect, clazz: this.classSelect}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.formData = response.data.data.rows
          this.total = response.data.data.total
          for (var i = 0; i < this.formData.length; i++) {
            this.formData[i].numValue = i + 1
            for (var j in this.gradeOption) {
              if (parseInt(this.formData[i].grade) === parseInt(j)) {
                this.formData[i].grade = this.gradeOption[j]
              }
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getGradeData () {
      this.$http.post(this._httpUrl + 'public/grade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getClassData () {
      this.$http.post(this._httpUrl + 'public/class/query?grade=' + this.gradeSelect, {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.classOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    clearGradeSelect () {
      this.gradeSelect = null
      this.classSelect = null
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
	.retrieval{
	  .body{
	    span{
	    	margin-left: 4%;
	    }
	    span:first-child{
	    	margin-left: 0;
	    }
	    .right{
	    	position: absolute; top: 69.5px; right: 10.4%;
	    }
	  }
	  .select{
	    width: 10%;
	    border: 0;
	    border-bottom: 1px solid #D7D7D7;
	  }
	  .middle{
	    width: 37%;
	    display: inline-block;
	    margin-left: 8%;
			&-text{
				width: 58%;
				border: 0;
				border-bottom: 1px solid #D7D7D7;
			}
		}
	}

</style>
